<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
<script src="../res/layui/layui.js"></script>
	<script src="../js/global.js"></script>
</head>

<body>

<div class="layui-container">
		<div id="detailDiv" class="layui-row layui-col-space10">
			<!--图片-->
			<div id="tupian" class="layui-col-sm5" style="margin-top: 20px;">

			</div>
			<div class="layui-col-sm7" style="margin-top: 10px;">
			<form id='form-xiugai' class="layui-form" action=""
		style="width: 60%; margin-top: 10px;" lay-filter="form-xiugai">
		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" name="pname" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">简介</label>
			<div class="layui-input-block">
				<input type="text" name="pIntroduction" placeholder=""
					autocomplete="off" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">类别</label>
			<div class="layui-input-block">
				<select id="categoryid" name="categoryid" lay-verify="" lay-search>
					<option value=""></option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-block">
				<input type="text" name="price" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-block">
				<input type="text" name="pcolor" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">大小</label>
			<div class="layui-input-block">
				<input type="text" name="size" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品状态</label>
				<div class="layui-input-block">
					<select id="pstate" name="pstate" lay-verify="">
						<option value=""></option>
						<option value="0">未上架</option>
						<option value="1">下架</option>
						<option value="2">上架</option>
					</select>
				</div>
		</div>
		<div class="layui-form-item">
							<label class="layui-form-label">图片路径</label>
							<div class="layui-input-block">
								<input type="text" id="picurl" name="picurl" readonly placeholder="" autocomplete="off" class="layui-input">
							</div>
						</div>

		<div style="display: none">
			<input type="text" name="pid" placeholder="" autocomplete="off"
				class="layui-input">
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="xiugai-submit">修改</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				<button type="button" class="layui-btn" id="test1"> 上传图片</button>
			</div>
		</div>
	</form>
</div>
</div>
</div>

	
</body>

<script>
	layui.use([ 'layer', 'form' ,'upload'], function() {
		var $ = layui.$ //jquery
		, layer = layui.layer //弹层
		, form = layui.form //表单
		, upload = layui.upload;

		
		 //获取url参数的方法	
		  function getQueryVariable(variable){
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){
			                  return decodeURIComponent(pair[1]);
			               }
			       }
			       return(false);
			}
		  //测试获取url参数
		  var str = getQueryVariable("searchKey");
		  layer.alert(str);

		  //文件上传实例
		  var uploadInst = upload.render({
		    elem: '#test1' //绑定元素
		    ,url: globalData.server + "/file/image" //上传接口
		    ,done: function(res){
		      //上传完毕回调   显示图片路径
		      $("#picurl").val(res.data)
		      $("#tupian").html("")
		      $("#tupian").append($("<img src='"+globalData.server+res.data+"' style='width: 90%;' />"))
		    }
		    ,error: function(){
		      //请求异常回调
		      console.log("网络异常")
		    }
		  });		
		
		
		
		//获取共享数据ids
		var ids = layui.sessionData("ids");
		
		var active = {
			loadData : function() {
				//去后台查询数据
				$.post("http://localhost:8080/g4/products/query", {
					//从本地拿学生id查询学生  没有则   查询id为101的学生（调试用）
					pid : ids["pid"] ? ids["pid"] : 101
				}, function(result) {
					if (result.code === '0') {
						form.val("form-xiugai", result.data);

					} else {
						layer.alert(result.msg);
					}
				}, "json");
			}
		}
		//加载班级下拉框

		$.post("http://localhost:8080/g4/products/selsctOpResults", {},
				function(result) {
					if (result.code === '0') {
						$.each(result.data, function(index, item) {
							$('#categoryid').append(
									new Option(item.value, item.view));// 下拉菜单里添加元素
						});
						form.render('select');
						active.loadData();
					} else {
						layer.alert(result.msg);
					}
				}, "json");

		form.on('submit(xiugai-submit)', function(data) {
			var str = $("#form-xiugai").serialize();
			$.post("http://localhost:8080/g4/products/update", str,
					function(result) {
						if (result.code === '0') {
							parent.layer.alert(result.msg);
							
							//关闭自身
							var index = parent.layer
									.getFrameIndex(window.name); //先得到当前iframe层的索引
							parent.layer.close(index);//再执行关闭
							parent.layui.$("#shousuo").click();
							
						} else {
							layer.alert(result.msg);
						}
					}, "json");
			return false;
		});
	});
</script>

</html>
